<template>
    <div>
        <div class="mui-flex" style="  height: 80px;
        border-bottom: 1px solid #e1e1e1;" @click="gotosystemMessage">
            <div class="cell">
                <img src="../../assets/task_system_msg.png" class="message-headImage" alt="" v-model="headUrl" @click="show1 = true" size="large">
                <yd-badge bgcolor="#f38209" class="yuan">{{systemNum}}</yd-badge>

            </div>
            <div class="cell4">
                <div class="mui-flex">
                    <div class="cell4">
                        <p class="message-title" >系统通知</p>
                    </div>
                    <div class="cell">
                        <p class="message-time">19:30</p>
                    </div>
                </div>
                <p class="message-destrice" >{{content}}</p>
            </div>

            </div>
        <div style="background-color: #f0f0f0;height: 10px"></div>

         <MessageCellComponent :messageList="messageList"/>



    </div>
</template>

<script>
    import MessageCellComponent from "@/components/messageCellComponent.vue";

    export default {
        name: "messageList",
    data() {
            return {
                systemNum:'1',
                systemDestrice:'乐视员工获刑4年 11月6日消息，今天下午，海淀法院官网发布案件快报种植木马程序。',
                messageList : [
                    {
                        "created" : "05-08 15:18",
                        "title" : "报修内容回复提醒",
                        "brief" : "测试：Ggg[MT00001804130002]报修内容回复提醒报修内容回复提醒报修内容回复提醒",
                        "msg_type" : "ProReply",
                        "content" : "490ff0ac1be8478398840502d78ee8c4",
                        "uuid" : "153fc372b63444fcbe558b8820c5d9a9"
                    },
                    {
                        "created" : "05-08 15:18",
                        "title" : "报修内容回复提醒",
                        "brief" : "报修内容回复提醒报修内容回复提醒报修内容回复提醒报修内容回复提醒报修内容回复提醒报修内容回复提醒报修内容回复提醒",
                        "msg_type" : "ProReply",
                        "content" : "490ff0ac1be8478398840502d78ee8c4",
                        "uuid" : "153fc372b63444fcbe558b8820c5d9a9"
                    }
                ],
            }
        },
        computed: {
            content() {
                const maxLen = 25;
                const haystack = this.systemDestrice.toString();
                return haystack.length > maxLen
                    ? haystack.slice(0, maxLen) + "..."
                    : haystack;
            }
        },
        components: {

            MessageCellComponent,
        },

        methods: {
            gotosystemMessage()
            {
                this.$router.push({name: 'systemMessage'});

            },
        },
        mounted()
        {


        }
    }
</script>

<style lang="scss">
    @import "./messsge.scss";

    .destrice1
    {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 6;// 限制快级元素的文本行数
        overflow: hidden;
        text-align: left;
        color: #b3b3b3;
        font-size: 0.20rem;
        margin-top: 0.1rem;
    }

</style>